<script lang="ts" setup>
import Login from "@/utils/login";
import mheader from "@/components/header.vue";
import FootMenu from "@/components/FootMenu.vue";
import { Ref, onMounted, ref, watch, computed } from "vue";
import { storeToRefs } from "pinia";
import navTo from "@/utils/navTo";
import { gameList, launchGame } from "@/api/games";
import i18n from "@/i18n";
import { getItem } from "@/utils/utils";
const userInfo = ref(
  getItem("userInfo") ? JSON.parse(getItem("userInfo")) : null
);
window.scrollTo(0, 0);
const title1 = computed(() => i18n.global.t("GameT1"));
const title2 = computed(() => i18n.global.t("GameT2"));
const title3 = computed(() => i18n.global.t("GameT3"));

const isFirst = ref(true);
const hasMore = ref(false);
const loading = ref(false);
const loading1 = ref(false);
const active = ref("FISH");
const page_size = ref(15);
const page = ref(1);
const gameListData = ref([]);
const total = ref(0);

watch(active, () => {
  if (isFirst.value) return;
  gameListData.value = [];
  hasMore.value = false;
  page.value = 1;
  getGameList();
});

const getGameList = async () => {
  console.log("i18n.global.locale", i18n.global.locale);
  try {
    loading1.value = true;
    let res = await gameList({
      product_type: 4,
      platform: "html5",
      client_type: "html5",
      game_type: active.value,
      page: page.value,
      page_size: page_size.value,
      language: i18n.global.locale == "zh" ? "CN" : "EN",
    });
    isFirst.value = false;
    console.log("gamelist:", res.value);
    res.value.data.games.forEach((item) => {
      item.icon =
        "https://images.b51613.com:42666/TCG_GAME_ICONS/AG/" +
        item.tcgGameCode +
        ".png";
    });
    gameListData.value = gameListData.value.concat(res.value.data.games || []);
    console.log("gameListData.value", gameListData.value);
    total.value = Number(res.value.data.page_info.totalCount);
    loading.value = false;
    loading1.value = false;
    if (
      Number(res.value.data.page_info.totalCount) >
      page.value * page_size.value
    ) {
      hasMore.value = true;
    }
  } catch (error) {
    loading1.value = false;
  }
};

const openGame = async (game: any) => {
  console.log("game is", game);
  if (!userInfo) return;
  let res = await launchGame({
    username: userInfo.username,
    product_type: 4,
    game_code: game.tcgGameCode,
    game_mode: "1",
    language: "CN",
    platform: "html5",
  });
  console.log("launchGame-res", res.value.data.game_url);
  window.open(res.value.data.game_url, "_blank");
};

const loadMoreData = () => {
  page.value++;
  loading.value = true;
  getGameList();
};

onMounted(() => {
  getGameList();
});
</script>
<template>
  <div class="mail-page">
    <div>
      <mheader />
      <div class="content">
        <van-tabs
          title-active-color="#fff"
          title-inactive-color="#999"
          v-model:active="active"
          shrink
        >
          <van-tab :title="title1" name="FISH"></van-tab>
          <van-tab :title="title2" name="RNG"> </van-tab>
          <van-skeleton v-if="loading1" title :row="10" />
          <van-tab :title="title3" name="LIVE"> </van-tab>
          <van-grid class="grid" :border="false" :gutter="3" column-num="3">
            <van-grid-item
              class="item"
              style="margin: 10px 0"
              v-for="(item, index) in gameListData"
              :key="index"
              @click="openGame(item)"
            >
              <div>
                <img lazy-load class="img" :src="item.icon" />
                <div class="name">{{ item.gameName }}</div>
              </div>
            </van-grid-item>
          </van-grid>
          <van-button
            v-if="hasMore"
            :loading="loading"
            loading-text="Loading..."
            @click="loadMoreData"
            class="showMore"
            >{{ i18n.global.t("GameT4") }}</van-button
          >
        </van-tabs>
      </div>
      <FootMenu :value="'mail'" />
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/constant.scss";

.mail-page {
  min-height: 100vh;
  margin: 0 auto;
  width: 750 * $_ru;
  flex-direction: column;
  background: #1a2c38;
  .content {
    padding: 30 * $_ru 20 * $_ru 120 * $_ru 20 * $_ru;
    .grid {
      margin-top: 6 * $_ru;
      .item {
        align-items: flex-start;
        justify-content: flex-start;
      }
    }
    .showMore {
      padding: 20 * $_ru 0;
      width: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #304553;
      color: rgba(255, 255, 255, 1);
      margin: 30 * $_ru auto;
      border: none !important;
      font-weight: bold;
    }
    .img {
      width: 100%;
    }
    .name {
      font-size: 24 * $_ru;
      color: #fff;
      margin: 10 * $_ru 0;
      text-align: center;
      font-weight: bold;
    }
  }
}
</style>
